<template>
  <div>
    <!-- <el-upload
      class="avatar-uploader"
      action="http://localhost:0829/upload/img"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload> -->

    <template v-for="(v, i) in imgArr">
      <img
        :key="i"
        :src="'http://localhost:0829/uploads/' + v"
        class="avatar"
        style="display: inline"
        alt=""
      />
    </template>
    <input type="file" multiple @change="changeIpt" />
    <el-progress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
    ></el-progress>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // imageUrl: "",
      imgArr: [],
      percentage: 0,
    };
  },
  methods: {
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(file);
    // },
    // beforeAvatarUpload(file) {
    //   // console.log(file);
    //   const isJPG = file.type === 'image/jpeg';
    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   return isJPG;
    // }
    changeIpt(e) {
      let fd = new FormData();
      console.log(fd);
      e.target.files.forEach((v) => {
        fd.append("file", v);
      });
      axios({
        url: "http://localhost:0829/upload/imgs",
        method: "post",
        data: fd,
        onUploadProgress: (progressEvent) => {
          this.percentage = (progressEvent.loaded / progressEvent.total) * 100;
        },
      }).then((v) => {
        this.imgArr = v.data.data;
        console.log(v.data.data);
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>